<template>
  <div>
    <el-card class="box-card" style="margin:20px;">
      <div slot="header" class="clearfix">
        <div class="tipText">
          <p>思想文化传播类加分</p>

          <table border class="table">
            <th style="width:30px">序号</th>
            <th>要素</th>
            <th>分值</th>
            <tr>
              <th>1</th>
              <td>
                公开发表学术论文，并被中国知网收入：核心期刊6分，普通刊物4分
              </td>
              <td>
                4-6分/篇
              </td>
            </tr>
            <tr>
              <th>2</th>
              <td>
                在省级公开刊物上发表文艺作品，应邀参加省级学术会议并宣读论文或收入论文集。
              </td>
              <td>
                3分/篇、次
              </td>
            </tr>
            <tr>
              <th>3</th>
              <td>
                在公开报刊发表新闻稿件，或者文章被《童灯》的“观点亮相”栏目采用。
              </td>
              <td>
                2分/件
              </td>
            </tr>
            <tr>
              <th>4</th>
              <td>
                被市级或市级以上广播电台、电视台采用；在省市级内部刊物上发表作品；在金华职业技术学院报发表。
              </td>
              <td>
                2分/件
              </td>
            </tr>
            <tr>
              <th>5</th>
              <td>
                书画、摄影等作品被《童灯》“佳作欣赏”栏目录用的；或者文章被《童灯》的“新芽试笔”栏目采用，满分2分。
              </td>
              <td>
                1分/件
              </td>
            </tr>
            <tr>
              <th>6</th>
              <td>
                文章或新闻稿被学院公众号、报刊或网站采用，满分2分。
              </td>
              <td>
                0.5分/件
              </td>
            </tr>
            <tr>
              <th>7</th>
              <td>
                入选院校两级宣讲团成员，并成功开展宣讲活动。
              </td>
              <td>
                1分
              </td>
            </tr>
          </table>

          <p>
            注：第二作者按分值50%加分，第三作者按分值25%加分，第四作者不加分。外宣作品以金华职业技术学院为第一作者单位。
          </p>
        </div>
      </div>
      <div>
        <avue-form
          v-if="update"
          ref="form"
          v-model="obj"
          :option="option"
          @reset-change="emptytChange"
          :rules="rules"
        >
          <template slot="menuForm">
            <el-button
              icon="el-icon-edit"
              type="primary"
              @click="submit"
              v-if="butDis"
              >提 交</el-button
            >
            <el-button
              icon="el-icon-edit"
              @click="updateSub"
              type="primary"
              v-else
              >更新</el-button
            >
          </template>
        </avue-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { baseUrl } from "@/config/env";
import { httpCheck } from "@/api/studentsPage/approval";
import { willHttp } from "@/api/teacherPage/review";

export default {
  data() {
    return {
      update: true,
      // 控制更新、新增按钮
      butDis: true,
    };
  },
  computed: {
    option() {
      return {
        size: "mini",
        mockBtn: false,
        submitBtn: false,
        printBtn: false,

        column: [
          {
            label: "活动名称",
            prop: "title",
            type: "input",
            span: 10,
            rules: [
              {
                required: true,
                message: "请输入活动名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "申报分数",
            prop: "applyFraction",
            type: "number",
            controlsPosition: "",
            span: 10,
            rules: [
              {
                required: true,
                message: "请输入数字",
                trigger: "blur",
                type: "number",
              },
            ],
          },

          {
            label: "申报理由",
            span: 18,
            prop: "adit",
            type: "textarea",
            mock: { type: "textarea" },
          },

          {
            label: "附件上传",
            prop: "imgUrl",

            type: "upload",
            propsHttp: {
              home: baseUrl,
              res: "data",
            },
            props: {
              value: "url",
              label: "name",
            },
            span: 24,
            listType: "picture-card",
            tip: "只能上传jpg/png文件，且不超过500kb",
            action: baseUrl + "/basic/sys-file-log/upload",
          },
        ],
      };
    },
  },

  async mounted() {
    let id = this.$route.query.id;
    if (id) {
      await willHttp("cluturalTransmission", id).then((res) => {
        this.obj.adit = res[0].data.remark;
        this.obj.applyFraction = res[0].data.applyFraction;
        this.obj.title = res[0].data.title;
        // let files = [];
        // let imgObj = "";
        // 处理图片字段名问题
        // if (res[0].data.files) {
        //   res[0].data.files.forEach(ele => {
        //     imgObj.label = ele.name;
        //     imgObj.value = ele.url;
        //     files.push(imgObj);
        //   });
        // }
        // this.obj.imgUrl = files;
        this.obj.imgUrl = res[0].data.files;
        console.log("img", this.obj.imgUrl);
        this.butDis = false;
      });
    }
  },

  methods: {
    // 更新
    updateSub() {
      this.submitParams("update");
    },
    // 提交done
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitParams();
        } else {
          return false;
        }
      });
    },
    async submitParams(par) {
      let params = {};
      // let files = [];
      // let imgObj = {};
      // if (this.obj.imgUrl) {
      //   this.obj.imgUrl.forEach(ele => {
      //     imgObj.name = ele.label;
      //     imgObj.url = ele.value;
      //     files.push(imgObj);
      //   });
      // }
      // params.files = files;
      params.files = this.obj.imgUrl;

      params.remark = this.obj.adit;
      params.applyFraction = this.obj.applyFraction;
      params.title = this.obj.title;
      console.log("img", params);
      debugger;
      if (par) {
        params.id = this.$route.query.id;

        httpCheck("cluturalTransmission", params, "PUT").then((res) => {
          if (res.code == 1) {
            this.submitFun(par);
          } else {
            this.reload();
            this.$message.error(res.message);
          }
        });
      } else {
        httpCheck("cluturalTransmission", params, "POST").then((res) => {
          if (res.code == 1) {
            this.submitFun();
          } else {
            this.reload();
            this.$message.error(res.message);
          }
        });
      }
    },
    submitFun(par) {
      if (par) {
        var arr = [" 更新成功", " 将在3s后自动跳转到申报详情页面"];
      } else {
        arr = [" 提交成功", " 将在3s后自动跳转到申报详情页面"];
      }
      let str = arr.join(" <br/> <br/> ");
      this.$message({
        dangerouslyUseHTMLString: true,
        message: str,
        type: "success",
      });
      setTimeout(() => {
        this.$router.push("/studentsPage");
        this.reload();
        this.emptyChange();
      }, 3000);
    },

    reload() {
      this.update = false;
      this.$nextTick(() => {
        this.update = true;
      });
    },
    // 清空方法
    emptyChange() {
      this.obj = {};
    },
  },
};
</script>
<style>
.tipText p {
  text-indent: 2em;
}
.tipText {
  border: 1px solid #455;
  height: 200px;
  overflow: auto;
  padding: 25px;
  padding-top: 0;
  font-size: 13px;
  font-weight: 300;
}
</style>
